﻿<UserControl x:Class="CodeAbility.MonitorAndCommand.WindowsPhoneController.UserControls.PhotonUserControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="clr-namespace:CodeAbility.MonitorAndCommand.WindowsPhoneController.Converters"              
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="160" d:DesignWidth="400">

    <UserControl.Resources>
        <converters:BooleanToOpacityConverter x:Key="BooleanToOpacity"></converters:BooleanToOpacityConverter>
        <converters:BooleanToBrushConverter x:Key="BooleanToBrush"></converters:BooleanToBrushConverter>
        <converters:BooleanToOnOffConverter x:Key="BooleanToOnOff"></converters:BooleanToOnOffConverter>
        <Style x:Key="TitleStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="FontSize" Value="42"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style x:Key="DataStyle" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="FontSize" Value="56"/>
            <Setter Property="Foreground" Value="White"/>
        </Style>
        <Style x:Key="EllipseStyle" TargetType="Ellipse">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Width" Value="60"/>
            <Setter Property="Height" Value="60"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Stroke" Value="White"/>
            <Setter Property="StrokeThickness" Value="2"/>
        </Style>
        <Style x:Key="SmallEllipseStyle" TargetType="Ellipse">
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Width" Value="40"/>
            <Setter Property="Height" Value="40"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Stroke" Value="White"/>
            <Setter Property="StrokeThickness" Value="2"/>
        </Style>
    </UserControl.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        
        <TextBlock Grid.Column="0" 
                   Text="{Binding ShortName, FallbackValue=X}"
                   Style="{StaticResource TitleStyle}"></TextBlock>
        <TextBlock Grid.Column="1" 
                   Text="{Binding Temperature, FallbackValue=0.0}"
                   Style="{StaticResource DataStyle}"></TextBlock>
        <TextBlock Grid.Column="2" 
                   Text="{Binding Humidity, FallbackValue=0.0}"
                   Style="{StaticResource DataStyle}"></TextBlock>
        
        <Grid Grid.Column="4">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Ellipse Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2" 
                 Fill="Green" 
                 Style="{StaticResource EllipseStyle}" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                 Opacity="{Binding GreenLED, Converter={StaticResource BooleanToOpacity}, FallbackValue=0.25}"
                 Tap="GreenEllipse_Tap"/>
            <Ellipse Grid.Row="2" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2"
                 Fill="Red" 
                 Style="{StaticResource EllipseStyle}" HorizontalAlignment="Right" VerticalAlignment="Top"                                                
                 Opacity="{Binding RedLED, Converter={StaticResource BooleanToOpacity}, FallbackValue=0.25}"
                 Tap="RedEllipse_Tap"/>

            <Ellipse Grid.Row="1" Grid.RowSpan="2" Grid.Column="0"  
                 Fill="Blue" 
                 Style="{StaticResource SmallEllipseStyle}"
                 HorizontalAlignment="Left"
                 Opacity="{Binding BoardLED, Converter={StaticResource BooleanToOpacity}, FallbackValue=0.25}"/>
        </Grid>
    </Grid>
</UserControl>